<template>
	<div class="view">

		<div class="main">
			<div class="main_con">
				<div class="m_title">欢迎登录系统</div>
				<div class="m_title2">登录青年和大学生就业集市小程序后台管理系统</div>
				<div class="m_data">
					<el-form :model="form" ref="form" :rules="rules">
						<el-form-item prop="hName">
							<div class="m_view">
								<input type="text" placeholder="账号" v-model="form.hName">
								<div class="m_icon">
									<i class="sign_icon2 i-16"></i>
								</div>
							</div>
						</el-form-item>
						<el-form-item prop="pwd">
							<div class="m_view">
								<input :type="type" placeholder="密码" v-model="form.pwd">
								<div class="m_icon">
									<i class="sign_icon1 i-16"></i>
								</div>
								<div class="place" @click="typeToggle">
									<i class="el-icon-view"></i>
								</div>
							</div>
						</el-form-item>
					</el-form>
					<button class="m_btn" @click="comment">立即登录</button>
				</div>
			</div>
		</div>

		<!-- <div class="footer">
			<div class="p1">Copyright©2021-2025 CN All Reserved</div>
			<div class="footer_con">
				<div class="sign_icon3 i-20"></div>
				<div class="p2">京ICP证1481196963号</div>
			</div>
		</div> -->

		<el-dialog :visible.sync="outerVisible" width="340px">
			<page-slide ref="child" @successData="successData"></page-slide>
		</el-dialog>
	</div>
</template>

<script>
import Slide from '../components/slider-verify/slider-verify.vue'
export default {
	components: {
		'page-slide': Slide
	},
	data() {
		return {
			outerVisible: false,// 图片验证是否显示
			form: {// 登录表单
				hName: "",
				pwd: "",
			},
			rules: {// 表单验证
				hName: [{
					required: true,
					message: '请输入名称',
					trigger: 'change'
				},],
				pwd: [{
					required: true,
					message: '请输入密码',
					trigger: 'change'
				},],
			},
			type: "password",// 切换密码类型

			nonce: 0,// 随机数
			timestamp: null,//时间戳
		}
	},
	methods: {
		// 随机数
		sui() {
			let nonce = Math.round(Math.random() * (9999999999999 - 1000000000000) + 1000000000000)
			return nonce
		},
		// 切换类型
		typeToggle() {
			if (this.type == 'password') {
				this.type = "text"
			} else {
				this.type = 'password'
			}
		},

		// 进行表单验证
		comment() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					this.outerVisible = true
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},

		// 图片校验
		successData(val) {
			if (val) {
				this.getTimeTmp()
			}
		},

		// 登录 
		sign() {
			let parma = new FormData()
			this.$http({
				'method': 'post',
				'url': this.$api.login,
				data: { adminname: this.form.hName, pwd: this.form.pwd }
			}).then(res => {
				if (res.data.code == 20000) {
					this.$message({
						type: 'success',
						message: res.data.message
					})
					this.$store.commit("setToken", res.data.data)
					this.$router.push("/")
				} else {
					this.$refs.child.refresh()
					this.$message.error(res.data.message)
				}
			})
		},

		// 获取时间戳
		getTimeTmp() {
			let that = this
			that.sign()
		},
	},
	created() {
		let token = localStorage.getItem('token')
		if (token != "" && token != undefined && token != null) {
			this.$router.push("/")
		}
		this.nonce = this.sui()
	}
}
</script>

<style scoped>
@import url(../assets/css/sign.css);
</style>
